<template>
  <div>
    <!-- <el-table v-loading="true" :data="tableData" style="width: 100%"> -->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <template slot="empty">
        <div style="background: #ccc">
          <img src="http://img.1314000.cn/logo.png" alt="" />
          <h3 style="color: #fff">没有数据</h3>
        </div>
      </template>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50">
        <template slot-scope="scope">
          <div>{{ scope.$index + 1 + (page - 1) * pagesize }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? '先生' : '女生' }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           -->
          <Btn action="edituser" size="mini" @actionFn="handleEdit(scope.$index, scope.row)">编辑</Btn>
          <Btn action="deluser" size="mini" type="danger" @actionFn="handleDelete(scope.$index, scope.row)">删除</Btn>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="total"
    />
  </div>
</template>

<script>
import Btn from '@/components/Btn'
export default {
  components: {
    Btn
  },
  props: ['tableData', 'deleteTableData', 'total', 'loadData', 'deleteUserIds'],
  data() {
    return {
      page: 1,
      pagesize: 10,
      currentPage: 1
    }
  },
  created() {
    // 把 + 写在左侧，进行了字符串转数字
    this.currentPage = +this.$route.query.page || 1
    // console.log('table', this.$route.query)
    this.page = this.currentPage
  },
  methods: {
    // 表格选中事件
    handleSelectionChange(rows) {
      let ids = rows.map(item => item.id)
      this.$emit('update:deleteUserIds', ids)
    },
    handleEdit(index, row) {
      // 点击了编辑，进行网络请求
      // 如果说，从简单的角度，在当前的组件中完成网络请求
      // 如果从标准的角度，一定要在父组件中完成网络请求工作
      this.$emit('handleEdit', row.id)
    },
    async handleDelete(index, row) {
      try {
        await this.$confirm('您真的要此行记录吗？', '删除确认')
        this.deleteTableData(index)
      } catch (error) {}
    },
    changePage(page) {
      this.page = page
      this.$router.replace('/admin/user?page=' + this.page)
      this.loadData(page)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
